<%# locals: (param_key:, param_value:) %>
<li class="flex items-center gap-1 text-sm border border-secondary rounded-3xl p-1.5">
  <% if param_key == "start_date" || param_key == "end_date" %>
    <div class="flex items-center gap-2">
      <%= icon "calendar" %>
      <p>
        <% if param_key == "start_date" %>
          <%= t(".on_or_after", date: param_value) %>
        <% else %>
          <%= t(".on_or_before", date: param_value) %>
        <% end %>
      </p>
    </div>
  <% elsif param_key == "search" %>
    <div class="flex items-center gap-2">
      <%= icon "text" %>
      <p><%= "\"#{param_value}\"".truncate(20) %></p>
    </div>
  <% elsif param_key == "accounts" %>
    <div class="flex items-center gap-2">
      <div class="w-5 h-5 bg-blue-600/10 text-xs flex items-center justify-center rounded-full"><%= param_value[0].upcase %></div>
      <p><%= param_value %></p>
    </div>
  <% elsif param_key == "amount" %>
    <div class="flex items-center gap-2">
      <%= icon "hash" %>
      <p><%= param_value %></p>
    </div>
  <% elsif param_key == "types" %>
    <div class="flex items-center gap-2 px-1">
      <div class="w-1 h-3 rounded-full <%= case param_value.downcase
                                          when "income" then "bg-green-500"
                                          when "expense" then "bg-red-500"
                                          when "transfer" then "bg-blue-500"
                                          end %>"></div>
      <p><%= t(".#{param_value.downcase}") %></p>
    </div>
  <% else %>
    <div class="flex items-center gap-2">
      <p><%= param_value %></p>
    </div>
  <% end %>

  <%= button_to clear_filter_transactions_path(param_key: param_key, param_value: param_value, **request.query_parameters),
        method: :delete,
        data: { turbo: false },
        class: "flex items-center cursor-pointer" do %>
    <%= icon "x", size: "sm", class: "hover:text-primary" %>
  <% end %>
</li>
